import React, { Component } from 'react';
import { Table, Space, message, Tabs } from 'antd';
import 'braft-editor/dist/index.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { myMarkingPage } from '../../../api/exam';
import AdvancedSearchForm from '../../../componentJsx/common/searchForm';
import HasPermi from '../../../componentJsx/common/hasPermi';

import 'antd/dist/antd.css';
import { getUrl } from '../../../utils';
import '../../../componentCss/component.css';
//import '../index.css';

//字典
import { getDictionaryLabel } from '../../../rudexRou/OperatesCookie.js';
class ExamManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      publishModalVisibl: false,
      deleteModalVisible: false, //删除的模态框
      confirmLoading: false, //确认按钮异步等待
      tableLoading: false, //表格等待
      selectedRowKeys: [], //最新表格多选
      selectedRows: [],
      //分页
      total: 0,
      pageSize: 10,
      page: 1,
      //数据
      tableData: [], //最新数据
      //表格列
      tableColumns: [
        {
          title: '考试名称',
          dataIndex: 'name',
          key: 'name',
          width: 240,
          fixed: 'left',
          ellipsis: true,
          // render: (_, record) => (
          //   <Space size='middle'>
          //     <a onClick={() => this.showDetail(record)}>{record.name}</a>
          //   </Space>
          // ),
        },
        {
          title: '考试级别',
          dataIndex: 'level',
          key: 'level',
          width: 80,
          ellipsis: true,
          render: (text) => getDictionaryLabel('examLevel', text),
        },
        {
          title: '考试语言',
          dataIndex: 'language',
          key: 'language',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('language', text),
        },
        {
          title: '有效期',
          dataIndex: 'validityBeginDate',
          key: 'validityBeginDate',
          ellipsis: true,
          width: 200,
          render: (t, r) =>
            t
              ? moment(r.validityBeginDate).format('YYYY-MM-DD') +
                ' 至 ' +
                moment(r.validityEndDate).format('YYYY-MM-DD')
              : r.validity == '1'
              ? '永久有效'
              : '一次性',
        },
        {
          title: '考试开始时间',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 140,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm') : text,
        },
        {
          title: '考试类型',
          dataIndex: 'open',
          key: 'open',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('testExamType', text),
        },
        {
          title: '考试语言',
          dataIndex: 'language',
          key: 'language',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('language', text),
        },
        {
          title: '题目数',
          dataIndex: 'questionNum',
          key: 'questionNum',
          ellipsis: true,
          width: 80,
        },
        {
          title: '考试时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
        },
        {
          title: '总分',
          dataIndex: 'totalScore',
          key: 'totalScore',
          ellipsis: true,
          width: 60,
        },
        {
          title: '及格分',
          dataIndex: 'passScore',
          key: 'passScore',
          ellipsis: true,
          width: 70,
        },
        {
          title: '创建人',
          dataIndex: 'createEmpName',
          key: 'createEmpName',
          ellipsis: true,
          width: 140,
          render: (t, r) => t + `(${r.createEmpNo})`,
        },
        {
          title: '阅卷人数',
          dataIndex: 'markingProcess',
          key: 'markingProcess',
          ellipsis: true,
          width: 100,
          fixed: 'right',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'handle',
          key: 'handle',
          width: 70,
          fixed: 'right',
          ellipsis: true,
          align: 'center',
          render: (_, record) => (
            <HasPermi
              bottonData={{
                type: 'link',
                size: 'small',
                interceptor: 'tmfsExamPlatform:readingTask:marking',
                clickFn: () => this.showDetail(record),
                text: '阅卷',
              }}
            />
          ),
        },
      ],
      //查询条件
      searchData: {},
      // 查询条件项配置
      searchForm: [
        {
          type: 'input',
          name: '考试名称',
          code: 'name',
          maxLength: 50,
        },
        {
          type: 'select',
          name: '考试语言',
          code: 'language',
          options: getDictionaryLabel('language'),
        },
      ],
      record: null,
      selectModel: 1,
    };
  }
  //获取最新数据
  getData = () => {
    this.setState({ tableLoading: true });
    const params = Object.assign(
      {
        currentPage: this.state.page,
        pageSize: this.state.pageSize,
        type: this.state.selectModel,
      },
      this.state.searchData
    );
    myMarkingPage(params)
      .then((res) => {
        if (res.data.code === 200) {
          if (res.data.data) {
            const list = res.data.data.list;
            list.forEach((item) => {
              item.markingProcess = `${item.markingNum ? item.markingNum : 0}/${
                item.applicantNum ? item.applicantNum : 0
              }`;
            });
            this.setState({
              total: res.data.data.total,
              tableData: list,
              tableLoading: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          } else {
            this.setState({
              total: 0,
              tableData: [],
              tableLoading: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          }
        } else {
          this.setState({ tableLoading: false });
          message.error(res.data.message || '查询数据失败!');
        }
      })
      .catch((err) => {
        this.setState({ tableLoading: false });
        message.error('查询数据失败!');
      });
  };
  //选择行
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  };
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.getData();
    });
  };
  //筛选搜索
  execSearch = (data) => {
    this.setState({ searchData: data, page: 1 }, () => {
      this.getData();
    });
  };
  //显示详情
  showDetail = (record) => {
    sessionStorage.setItem('examData', JSON.stringify(record));
    getUrl('/TmfsExam/ReadingTask/ExamDetail');
  };
  //防抖
  debounce(fn, ms = 500) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        fn.apply(this, arguments);
      }, ms);
    };
  }
  componentWillMount() {}
  componentDidMount() {
    this.getData();
    if (sessionStorage.getItem('examData'))
      sessionStorage.removeItem('examData');
  }
  //组件销毁时取消setState
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  // 切换tabs
  changeTabs = (key) => {
    this.setState({ selectModel: key }, () => {
      this.getData();
    });
  };
  render() {
    //多选行配置
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div id='evaluate'>
        <div className='myProjectsBody'>
          <Tabs
            defaultActiveKey={this.state.selectModel}
            onChange={this.changeTabs}
          >
            <Tabs.TabPane tab='考试阅卷' key='1'>
              <div className='tabstyle'>
                <div className='bigContent1'>
                  <AdvancedSearchForm
                    execSearch={this.execSearch}
                    formData={this.state.searchForm}
                  />
                </div>
                <div className='bigContent1' id='projectDetail'>
                  <div className='tableDiff'>
                    <Table
                      rowKey='id'
                      loading={this.state.tableLoading}
                      style={{ marginTop: 10 }}
                      scroll={{ x: '100' }}
                      // rowSelection={{ type: 'checkbox', ...rowSelection }}
                      columns={this.state.tableColumns}
                      dataSource={this.state.tableData}
                      pagination={{
                        total: this.state.total,
                        pageSize: this.state.pageSize,
                        current: this.state.page,
                        showSizeChanger: true,
                        onChange: this.changePage,
                        onShowSizeChange: this.changePageSize,
                        showTotal: (total) => '共 ' + total + ' 条',
                      }}
                      bordered
                    />
                  </div>
                </div>
              </div>
            </Tabs.TabPane>
            <Tabs.TabPane tab='练习阅卷' key='0'>
              <div className='tabstyle'>
                <div className='bigContent1'>
                  <AdvancedSearchForm
                    execSearch={this.execSearch}
                    formData={this.state.searchForm}
                  />
                </div>
                <div className='bigContent1' id='projectDetail'>
                  <div className='tableDiff'>
                    <Table
                      rowKey='id'
                      loading={this.state.tableLoading}
                      style={{ marginTop: 10 }}
                      scroll={{ x: '100' }}
                      // rowSelection={{ type: 'checkbox', ...rowSelection }}
                      columns={this.state.tableColumns}
                      dataSource={this.state.tableData}
                      pagination={{
                        total: this.state.total,
                        pageSize: this.state.pageSize,
                        current: this.state.page,
                        showSizeChanger: true,
                        onChange: this.changePage,
                        onShowSizeChange: this.changePageSize,
                        showTotal: (total) => '共 ' + total + ' 条',
                      }}
                      bordered
                    />
                  </div>
                </div>
              </div>
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

export default ExamManagement;
